<template>
  <div class="all-clue">
    <!-- <div class="filter">
      <span style="margin-right: 30px">快捷筛选:</span>
      <el-button
        :class="{ 'active-button': activeButton === 'button0' }"
        @click="toggleButton('button0', 4)"
      >
        全部
      </el-button>
      <el-button
        :class="{ 'active-button': activeButton === 'button1' }"
        @click="toggleButton('button1', 1)"
      >
        今日待跟进
      </el-button>

      <el-button
        :class="{ 'active-button': activeButton === 'button2' }"
        @click="toggleButton('button2', 2)"
      >
        逾期未跟进
      </el-button>
    </div> -->
    <div class="current-students-search">
      <el-form :model="form" ref="ruleFormRef" label-width="auto">
        <el-row :gutter="0" style="margin-bottom: 10px">
          <el-col :span="6">
            <el-form-item label="搜索学员:">
              <el-input
                v-model="searchName"
                style="width: 80%"
                placeholder="请输入学员姓名/手机号"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="padding-right: 4%">
            <el-form-item label="跟进时间:">
              <el-date-picker
                v-model="cTime"
                type="daterange"
                unlink-panels
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跟进人:">
              <el-select
                v-model="followPeople"
                placeholder="请选择跟进人"
                style="width: 80%"
                clearable
              >
                <el-option
                  v-for="item in followPeopleList"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id"
                >
                  {{ item.nickName }}{{ !item.isJob ? '(已离职)' : '' }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="Search" @click="toSearch"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="toClear(ruleFormRef)"
              >重置</el-button
            >
          </el-col>
        </el-row>
        <el-row :gutter="0" style="margin-bottom: 10px">
          <el-col :span="6">
            <el-form-item label="跟进阶段:">
              <el-select
                v-model="followPhase"
                placeholder="请选择跟进阶段"
                style="width: 80%"
                clearable
              >
                <el-option
                  v-for="item in followPhaseList.value"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <span class="search-label"> 任务状态:</span>
            <el-select
              v-model="followState"
              placeholder="请选择任务状态"
              style="width: 80%"
              @change="toSearch"
              clearable
            >
              <el-option
                v-for="item in followStateList"  
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <!-- <div class="manage-students">
      <el-button plain>批量导出</el-button>
    </div> -->
    <!-- 表格 -->
    <div class="students-table">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column label="学员姓名" fixed="left" width="200">
          <template #default="scope">
            <router-link
              :to="'/registrar/studentsDetails/detail/' + scope.row.studentId"
              class="link-type"
            >
              <div style="display: flex; align-items: center">
                <span
                  style="margin-right: 10px; color: #67c23a; cursor: pointer"
                  >{{ scope.row.name }}</span
                >
                <el-icon v-if="scope.row.gender == '1'" style="color: #fb6465"
                  ><Female
                /></el-icon>
                <el-icon
                  v-else-if="scope.row.gender == '0'"
                  style="color: #4791ed"
                  ><Male
                /></el-icon>
              </div>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          property="contactPhone"
          label="手机号"
          fixed="left"
          show-overflow-tooltip
          :formatter="formatName"
          width="260"
        />
        <el-table-column
          property="counselor"
          label="跟进人"
          show-overflow-tooltip
          :formatter="formatName"
          width="260"
        />
        <el-table-column
          property="phaseName"
          label="跟进阶段"
          show-overflow-tooltip
          :formatter="formatName"
          width="260"
        />
        <el-table-column
          property="contactTime"
          label="跟进时间"
          show-overflow-tooltip
          :formatter="formatName"
          width="260"
        />
        <el-table-column
          property="contactName"
          label="跟进方式"
          show-overflow-tooltip
          :formatter="formatName"
          width="260"
        />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <!-- <el-button link type="primary" @click="toAddClue(scope.row, '添加')"
              >添加</el-button
            >
            <el-button link type="primary" @click="toAddClue(scope.row, '修改')"
              >修改</el-button
            > -->
            <el-button
              v-hasPermi="['sales:follow:delete']"
              link
              type="primary"
              @click="toDeleteClue(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        @pagination="toGetFollowList"
      />
      <div style="height: 10px"></div>
    </div>
    <!-- <AddFollowUpDialog
      :type="type"
      :isShowDialog="isShowDialog"
      :studentRow="studentRow"
      @update:isShowDialog="updateShowDialog"
      @update:tableList="toGetFollowList"
    /> -->
  </div>
</template>


<script setup>
import Pagination from '@/components/Pagination/index.vue'
import { ref, reactive, provide } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import useRegistrarStore from '@/store/modules/registrar'
// import AddFollowUpDialog from '@/components/StudentCom/addFollowUpDialog.vue'
import {
  getFollowList,
  getPeopleList,
  getFollowPhase,
  getFollowMethods,
  followDelete,
  getFollowPeopleList,
} from '@/api/studentManagement/index.js'

const props = defineProps({
  selectedClue: {
    type: Number,
    default: 0,
  },
})
const { proxy } = getCurrentInstance()
const loading = ref(true)
//创建store
const registrarStore = useRegistrarStore()
//筛选
const searchName = ref('') //学员搜索
const cTime = ref('')
//任务状态
const followState = ref('')
const followStateList = reactive([
  {
    label: '未开始',
    value: 1,
  },
  {
    label: '已完成',
    value: 2,
  },
  {
    label: '已逾期',
    value: 3,
  },
  {
    label: '已取消',
    value: 4,
  },
])
//跟进人&学员创建人
const followPeople = ref('')
const followPeopleList = ref([])
const toFollowPeopleList = async () => {
  try {
    const res = await getFollowPeopleList({ pageNum: 1, pageSize: 9999 })
    if (res.code == 200) {
      followPeopleList.value = res.rows
    }
  } catch (error) {
    console.error('获取学员创建人下拉列表失败:', error)
  }
}
onMounted(toFollowPeopleList)
//获取跟进阶段下拉列表
const followPhase = ref('')
const followPhaseList = reactive([])
const toGetFollowPhase = async () => {
  try {
    const res = await getFollowPhase({})
    if (res.code == 200) {
      followPhaseList.value = res.data
    }
  } catch (error) {
    console.error('获取跟进阶段下拉列表失败:', error)
  }
}
onMounted(toGetFollowPhase)

//筛选学员列表
function toSearch() {
  toGetFollowList()
}

//控制折叠
const isCollapse = ref(true)
function setCollapse() {
  isCollapse.value = !isCollapse.value
}

//分页器
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
//处理日期格式
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
//获取表格数据
const tableData = ref([])
const clueType = ref(4)
const toGetFollowList = async () => {
  loading.value = true
  const params = {
    stage: 3,
    type: clueType.value,
    mine: props.selectedClue,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    wxParam: searchName.value,
    counselorId: followPeople.value,
    phase: followPhase.value,
    states: followState.value,
    conStartTime: cTime.value ? formatDate(cTime.value[0]) : '',
    conEndTime: cTime.value ? formatDate(cTime.value[1]) : '',
  }
  try {
    const res = await getFollowList(params)
    if (res.code == 200) {
      total.value = res.total
      tableData.value = res.rows
      loading.value = false
    }
  } catch (error) {
    console.error('获取学生列表失败:', error)
  }
}
onMounted(toGetFollowList)
//表格没有数据显示'-'
const formatName = (row, column, cellValue) => {
  return cellValue === '' || cellValue === null ? '-' : cellValue
}

//清空搜索内容
const toClear = () => {
  followPeople.value = ''
  followPhase.value = ''
  followState.value = ''
  searchName.value = ''
  cTime.value = ''
  pageNum.value = 1
  toGetFollowList()
}
//快捷筛选操作
const activeButton = ref('button0')
function toggleButton(value, type) {
  activeButton.value = activeButton.value === value ? null : value
  clueType.value = type
  toGetFollowList()
}

//添加跟进记录
// const isShowDialog = ref(false)
// const studentRow = ref({})
// const type = ref('')

// const toAddClue = (row, newType) => {
//   isShowDialog.value = true
//   studentRow.value = row
//   type.value = newType
//   console.log('row', row)
// }
//删除跟进记录
const toDeleteClue = (row) => {
  ElMessageBox.confirm('是否将学员放入回收站', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        const res = await followDelete({
          id: row.id,
        })
        if (res.code == 200) {
          toGetFollowList()
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      } catch (error) {
        console.error('删除失败:', error)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
const updateShowDialog = (value) => {
  isShowDialog.value = value
}
</script>

<style lang="scss" scoped>
.all-clue {
  .filter {
    margin: 20px 0;

    color: #666;
    .active-button {
      background-color: #409eff; /* 自定义高亮颜色 */
      color: white; /* 字体颜色 */
      border-color: #409eff; /* 边框颜色 */
    }
  }
  // position: relative;
  .current-students-search {
    position: relative;
    .use-btn {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 40px;
      width: 10%;
      height: 30px;
      cursor: pointer;
      .collapse-btn {
      }
    }
    .search-label {
      display: inline-block;
      width: 18%;
      text-align: right;
      margin-right: 8px;
      font-size: 14px;
    }
    .current-students-search-main {
      width: 90%;

      .search-collapse {
        // height: 500px;
        // background-color: red;
      }
    }
  }
  .manage-students {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 40px;
    // background-color: red;
  }
}
</style>